<template>
  <div class="view">
    <div class="right-table">
      <div class="container-top">
        音频转码
      </div>
      <div class="top-search">
        <div>
          <el-date-picker
            v-model="searchUpdateTime"
            align="right"
            type="daterange"
            start-placeholder="更新时间开始日期"
            end-placeholder="更新时间结束日期"
            value-format="yyyy-MM-dd"
            @change="doSearch"
          >
          </el-date-picker>
        </div>
        <div style="display: flex">
          <el-input
            placeholder="请输入模板名称"
            v-model="filterParams.templateName"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="doSearch"
            ></el-button>
          </el-input>
          <el-button
            type="primary"
            style="margin-left: 8px"
            plain
            @click="reset"
            >重置</el-button
          >
        </div>
      </div>
      <div class="top-operate">
        <auth-btn
          btn-id="btn_batch_del"
          type="danger"
          plain
          @click="handleBatchDel"
          >批量删除</auth-btn
        >
        <auth-btn
          btn-id="form_generate_add"
          icon="el-icon-plus"
          type="primary"
          @click="add"
          >新增转码</auth-btn
        >
      </div>
      <table-list
        :data="listData"
        :column-cfg="columnCfg"
        :total-size="totalSize"
        :page-size="filterParams.pageSize"
        :loading="dataLoading"
        :show-pagination="true"
        :current-page="pagination.pageNum"
        select-type="multiple"
        @refresh-list="getList"
        @delete-item="handleDeleteItem"
        @selection-change="handleSelectionChange"
        :handleSortfield="handleSortfield"
        ref="tableList"
      >
        <template #autoTranscoding="{ row }">
          <el-switch
            :value="row.autoTranscoding"
            :active-value="1"
            @change="onChangedataStatus(row, 'autoTranscoding')"
            :inactive-value="0"
          ></el-switch>
        </template>
        <template #statusMark="{ row }">
          <el-switch
            :value="row.statusMark"
            :active-value="1"
            @change="onChangedataStatus(row, 'statusMark')"
            :inactive-value="0"
          ></el-switch>
        </template>
        <template v-slot:action="scope">
          <auth-link
            style="margin: 0 4px"
            link-id="btn_edit"
            title="编辑"
            :underline="false"
            :type="'primary'"
            @click="handleEditItem(scope.row)"
            >编辑
          </auth-link>
          <auth-link
            :disabled="scope.row.statusMark === 1"
            style="margin: 0 4px"
            link-id="btn_del"
            title="删除"
            :underline="false"
            :type="'danger'"
            @click="handleDeleteItem(scope.row)"
            >删除
          </auth-link>
        </template>
      </table-list>
    </div>
  </div>
</template>
<script>
import TableList from "@/components/TableList/index";
import ListAction from "@/views/_mixins/list-action";
import {
  list as commonList,
  autoTranscodingChange,
  statusMarkStatusChange,
  batchDelete,
} from "@/api/system-config/audio-transcode";
import AuthBtn from "@/components/AuthBtn";
import AuthLink from "@/components/AuthLink";
const defaultSearchParams = {
  statusMark: "",
  updateTime: "",
  templateName: "",
};
export default {
  name: "transcode-audio",
  mixins: [ListAction],
  components: {
    TableList,
    AuthBtn,
    AuthLink,
  },
  data() {
    return {
      list: commonList,
      filterParams: { pageSize: 10, ...defaultSearchParams },
      listData: [],
      SortfieldMap: {
        updateTime: {
          key: "orderByClause",
          ascending: "updateAsc",
          descending: "updateDesc",
        },
      },
      columnCfg: {
        templateName: { label: "模板名称", align: "left" },
        audioType: {
          label: "封装格式",
          align: "left",
          dictKey: "audio_type",
        },
        bitrate: {
          label: "码率",
          align: "left",
        },
        channels: { label: "声道 ", align: "left" },
        sampleRate: {
          label: "采样率",
          align: "left",
        },
        volumeAdjustment: {
          label: "音量调整方式 ",
          align: "left",
          dictKey: "volume_adjustment",
        },
        autoTranscoding: {
          label: "自动转码",
          width: "80",
          align: "left",
          slotName: "autoTranscoding",
        },
        statusMark: {
          label: "状态",
          width: "80",
          align: "left",
          slotName: "statusMark",
        },
        updateTime: {
          label: "更新时间 ",
          align: "left",
          width: "140",
          sortable: "custom",
        },
        action: {
          label: "操作",
          width: "120",
          align: "left",
          slotName: "action",
          actionArr: [
            {
              label: "编辑",
              link_id: "btn_edit",
            },
            {
              label: "删除",
              link_id: "btn_del",
            },
          ],
        },
      },
    };
  },
  watch: {},
  created() {},
  mounted() {},
  activated() {
    this.$first ? this.getList() : (this.$first = true);
  },
  beforeDestroy() {},
  computed: {
    searchUpdateTime: {
      get() {
        return this.filterParams.updateTime
          ? this.filterParams.updateTime.split(",")
          : [];
      },
      set(v) {
        this.$set(this.filterParams, "updateTime", v ? `${v[0]},${v[1]}` : "");
      },
    },
  },
  methods: {
    filterParamsHandle() {
      if (!this.filterParams.updateTime) {
        delete this.filterParams.updateTime;
      }
    },
    /**
     * 删除行记录
     * @param row
     */
    handleDeleteItem(row) {
      this.$confirm("删除模板，请谨慎操作", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: 'cancel-msgbtn', confirmButtonClass: 'confirm-msgbtn', type: 'warning',
      }).then(() => {
        batchDelete(row.templateId).then((res) => {
          this.$message.success("删除模板成功");
          this.getList();
        });
      });
    },
    handleBatchDel() {
      if (this.multipleSelection.length > 0) {
        if (this.multipleSelection.filter((i) => i.statusMark === 1).length) {
          this.$message.error("存在启用状态的模板，无法删除");
          return;
        }
        this.$confirm("确定要删除选中模板吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: 'cancel-msgbtn', confirmButtonClass: 'confirm-msgbtn', type: 'warning',
        }).then(() => {
          let ids = this.multipleSelection
            .map((ele) => ele.templateId)
            .join(",");
          batchDelete(ids).then((res) => {
            this.$message.success("清空选中模板成功");
            this.getList();
          });
        });
      } else {
        this.$message.warning("未选择任何模板");
      }
    },
    resestPageList() {
      this.filterParams.pageNum = 1;
      this.pagination.pageNum = 1;
    },
    doSearch() {
      this.resestPageList();
      this.getList();
    },
    reset() {
      this.filterParams = {
        pageSize: this.filterParams.pageSize,
        ...defaultSearchParams,
      };
      this.$refs.tableList.clearSort();
      this.doSearch();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    add() {
      this.$router.push({ name: "transcode-audio-form",query: { formType: "1" } });
    },
    handleEditItem(row) {
      this.$router.push({
        name: "transcode-audio-form",
        query: { id: row.templateId ,formType: "2" },
      });
    },
    onChangedataStatus(row, key) {
      let method =
        key === "statusMark" ? statusMarkStatusChange : autoTranscodingChange;
      const tip = row[key] === 1 ? "禁用" : "启用";
      const color = row[key] === 1 ? "#f78989" : "#67C23A";
      const data = row[key] === 1 ? "0" : "1";
      const h = this.$createElement;
      const msg = h("p", null, [
        "是否确定",
        // h("span", { style: `color: ${color}` }, tip),
        h("span", {}, tip),
      ]);
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: 'cancel-msgbtn', confirmButtonClass: 'confirm-msgbtn', type: 'warning',
      }).then(() => {
        method(row.templateId, data).then(() => {
          this.$message.success(`${tip}成功`);
          this.getList();
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .right-table {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0 16px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    &::-webkit-scrollbar-track-piece {
      background: rgba(200, 200, 200, 0.1);
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 8px;
      background: rgba(200, 200, 200, 0.5);
    }
    .top-search,
    .top-operate {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
    }
  }
}
::v-deep .el-input-group__prepend {
  width: 150px !important;
}
::v-deep .el-alert--warning.is-light {
  background-color: #fff;
  color: #f56c6c;
  width: 500px;
  height: 32px;
}
.container-top {
  height: 56px;
  line-height: 56px;
  font-weight: bold;
  font-size: 20px;
}
</style>
